

<!-- 支付成功 -->
<template>
	<view class="paySuccess-Container">
		<!-- header部分 -->
		<view class='header-Container header-height'>
			<view class="header-bg"></view>
		</view>
		
		<!-- 查看订单 -->
		<view class="orderDetail-Container">
			<view class="successIcon-Container">
				<image class="successIcon" :src="icon.successIcon" mode="widthFix"></image>
			</view>
			<view class="successText">
				支付成功
			</view>
			
			<view class="detailBtn-Container">
				<view @click="gotoOrderDetailPage()" class="detailBtn">
					查看订单
				</view>
			</view>
		</view>
		
		
		<!-- 获取优惠券 -->
		<view v-if="couponList.length" class="couponOuter-Container">
			<image class="couponHeaderBg" :src="icon.couponHeaderBg" mode=""></image>
			<view class="couponList-Container">
				<view class="coupon" v-for="(item,index) of couponList" :key="item.id">
					<image class="bg" :src="item.zkType == '1'?icon.youhui_zk: icon.youhuiquan"></image>
					<view class="detail">
						<view class="left"> 
							<view class="price" v-if="item.couponType === '10'">
								<text>￥</text>
								<text>{{item.faceValue / 100}}</text>
							</view>
							<view class="price" v-if="item.couponType === '20'">
								<text style="font-size: 54rpx;">{{item.faceValue / 10}}</text>
								<text style="font-size: 28rpx;">折</text>
							</view>
							<view class="msg ellipsis2" v-if="item.enoughMoney != '0'">满{{item.enoughMoney / 100}}可用</view>
							<view class="msg ellipsis2" v-if="item.enoughMoney == '0'">无门槛优惠券</view>
						</view>
						<view class="right">
							<view class="top">
								<view class="name ellipsis2">
									<text class="quan" v-if="item.couponType === '10'">满减券</text>
									<text class="quan" v-if="item.couponType === '20'">折扣券</text>
									<!-- <text class="quan" v-if="item.couponType === '30'">免单券</text>
									<text class="quan" v-if="item.couponType === '40'">免运费券</text>
									<text class="quan" v-if="item.couponType === '50'">满减运费券</text> -->
									<text class="text">{{ item.couponName }}</text>
								</view>
								<view class="time">
									<view class="canUse">{{item.beginTime | formatDate}}-{{item.endTime | formatDate}}</view>
									<!-- <view class="use" @click="toUse"><view>立即使用</view></view> -->
								</view>
							</view>
							<view class="bottom" @click="selectZk(index)">
								<view>使用说明</view>
								<view>
									<image v-if="item.zkType == '0'" :src="icon.down"></image>
									<image v-if="item.zkType == '1'" :src="icon.up"></image>
								</view>
							</view>
						</view>
					</view>
					<view class="discount-detail" v-if="item.zkType == '1'">
						<view>{{item.ruleDes}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import navHeader from '@/components/nav-header/nav-header';
	
	export default {
		filters: {
			formatDate: function(date) {
				
				var date = new Date(date);
				var YY = date.getFullYear() + '-';
				var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
				// var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
				// var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
				// var ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
				
				return YY + MM + DD;
			}
		},
		data() {
			return {
				icon: {
					successIcon: '/static/images/order/pay/successIcon.png',
					couponHeaderBg: '/static/images/order/pay/hongbao_bg.png',
					youhuiquan: '/static/images/coupon/youhuiquan.png',
					youhui_zk: '/static/images/coupon/youhui_zk.png',
					down: '/static/images/coupon/down.png',
					up: '/static/images/coupon/up.png',
				},
				
				orderParentId: "",
				orderIds: "",
				couponList: []
			}
		},
		onLoad(options) {
			this.orderParentId = options.orderParentId;
			this.orderIds = options.orderIds;
			
			//查询优惠券
			this.getOrderSuccessCoupon();
		},
		methods: {
			
			// goto订单详情
			gotoOrderDetailPage() {
				uni.redirectTo({
					url: 'orderDetail?orderParentId='+this.orderParentId+'&orderIds='+this.orderIds
				})
			},
			
			
			//查询优惠券
			getOrderSuccessCoupon() {
				
				var that = this;
				that.$api.globalUtil.requestAjax({
					url: '/coupon/payAddCustomerCoupon',
					method: "POST",
					data: {
						orderParentId: that.orderParentId,
						orderIds: that.orderIds
					},
					success: function(res) {
						if(res.data.success) {
							var couponList = res.data.response;
							
							for(let i of couponList){
								i.zkType = '0';
								// i.beginTime = i.beginTime.split(' ')[0];
								// i.endTime = i.endTime.split(' ')[0];
							}
							
							that.couponList = couponList || [];
						}
					}
				});
			},
			
			//展开说明
			selectZk(index){
				this.couponList[index].zkType == '0'? this.couponList[index].zkType = '1':this.couponList[index].zkType = '0';
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}

	// header部分
	.header-Container {
		z-index: 999;
		width: 100%;
		height: 176rpx;
		overflow: hidden;
		// box-shadow: 0px 1rpx 1rpx 0px rgba(0, 0, 0, 0.08);
		background: rgba(255, 255, 255, 1);
		
		.header-bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background:#FE5E49;
		}
	}
	
	
	//查看订单
	.orderDetail-Container {
		position: relative;
		width: 100%;
		height: 550rpx;
		background:#FE5E49;
		
		.successIcon-Container {
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			bottom: 288rpx;
			width: 100%;
			height: 100rpx;
			
			.successIcon {
				width: 100rpx;
				height: 100rpx;
			}
		}
		
		.successText {
			position: absolute;
			bottom: 240rpx;
			width: 100%;
			// height:25rpx;
			line-height:30rpx;
			text-align: center;
			font-size:26rpx;
			font-family:PingFang SC;
			color:rgba(255,255,255,1);
		}
		
		.detailBtn-Container {
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			bottom: 130rpx;
			width: 100%;
			
			.detailBtn {
				width:194rpx;
				height:60rpx;
				line-height: 60rpx;
				text-align: center;
				font-size:30rpx;
				font-family:PingFang SC;
				// font-weight:500;
				color:#FE5E49;
				background:rgba(255,255,255,1);
				border-radius:30rpx;
			}
		}
	}
	
	
	//获取优惠券
	.couponOuter-Container {
		margin: 0 auto;
		margin-top: 60rpx;
		width: 690rpx;
		
		.couponHeaderBg {
			width: 100%;
			height: 167rpx;
		}
		
		.couponList-Container {
			margin-top: -20rpx;
			padding: 90rpx 36rpx 52rpx 36rpx;
			width: 100%;
			height: auto;
			border-radius:0px 0px 20rpx 20rpx;
			background-color: #FD5D46;
			margin-bottom: 50rpx;
		} 
	}
	
	
	// 单个优惠券
	.coupon {
		position: relative;
		margin-bottom: 18rpx;
		width: 100%;
		// height: 170rpx;
		z-index: 2;
		
		.bg {
			height: 170rpx;
			width: 100%;
			position: absolute;
			z-index: 1;
			top: 0;
		}
		.detail {
			position: relative;
			z-index: 2;
			height: 100%;
			width: 100%;
			display: flex;
			
			.left {
				display: flex;
				flex-direction: column;
				justify-content: center;
				text-align: center;
				width: 199rpx;
				height: 170rpx;
				
				.price text:first-child {
					color: #FE5E49;
					font-size: 30rpx;
					font-weight: bold;
				}
				.price text:last-child {
					color: #FE5E49;
					font-size: 54rpx;
					font-weight: bold;
				}
				.msg {
					font-size: 20rpx;
					color: #FE5E49;
				}
			}
			.right {
				width: 488rpx;
				height: 170rpx;
				padding-top: 12rpx;
				.top {
					padding: 0 0 16rpx 30rpx;
					height: 120rpx;
					line-height: 40rpx;
					border-bottom: 1rpx solid #dbdbdb;
					border-bottom-style: dotted;
					.name {
						height: 88rpx;
						position: relative;
					}
					.text {
						font-size: 22rpx;
						// font-weight: bold;
						color: #333333;
						padding-left:108rpx;
					}
					.quan {
						position: absolute;
						top: 10rpx;
						left: 0;
						display: flex;
						align-items: center;
						justify-content: center;
						width: 90rpx;
						height: 28rpx;
						white-space: nowrap;
						font-size: 18rpx;
						color: #FE5E49;
						border-radius: 14rpx;
						border: 1px solid #FE5E49;
						
					}
					.time {
						height: 36rpx;
						width: 100%;
						display: flex;
						align-items: center;
						.canUse {
							margin-bottom: 20rpx;
							color: #666666;
							width: 70%;
							font-size: 20rpx;
						}
						.use {
							width: 30%;
							text-align: right;
							view {
								color: #fff;
								width: 120rpx;
								border-radius: 18rpx;
								height: 36rpx;
								display: flex;
								align-items: center;
								justify-content: center;
								font-size: 18rpx;
								background: #FE5E49;
							}
						}
					}
				}
				.bottom {
					display: flex;
					align-items: center;
					height: 40rpx;
					image {
						width: 12rpx;
						height: 8rpx;
					}
					view:first-child {
						color: #666666;
						font-size: 18rpx;
						padding-left: 26rpx;
						width: 50%;
					}
					view:last-child {
						padding-right: 26rpx;
						width: 50%;
						display: flex;
						align-items: center;
						flex-direction: row-reverse;
					}
				}
			}
		}
	}
	// 优惠券使用说明
	.discount-detail {
		border: 1rpx solid #ffe5e7;
		border-top: 0;
		margin-left: 2rpx;
		border-radius: 0 0 20rpx 20rpx;
		color: #666;
		font-size: 18rpx;
		padding: 10rpx 20rpx;
		background-color: #FFFFFF;
		
		view {
			// margin-top: 16rpx;
		}
	}
</style>



